<template>
  <div class="resources">
    <div class="page-header">
      <h2>心理课堂</h2>
      <p class="sub-title">丰富的心理健康教育资源，助您成长</p>
    </div>

    <!-- 资源分类标签 -->
    <div class="filter-tags">
      <el-radio-group v-model="activeType" @change="handleTypeChange">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="ARTICLE">文章</el-radio-button>
        <el-radio-button label="VIDEO">视频</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 资源列表 -->
    <div class="resource-list" v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="8" v-for="item in resources" :key="item.id">
          <el-card class="resource-card" @click="handleResourceClick(item)">
            <!-- 视频资源 -->
            <template v-if="item.type === 'VIDEO'">
              <div class="video-preview">
                <video 
                  :src="item.videoUrl" 
                  class="video-thumbnail"
                  preload="metadata"
                />
                <div class="play-icon">
                  <el-icon :size="40"><video-play /></el-icon>
                </div>
              </div>
            </template>
            <!-- 文章资源 -->
            <template v-else>
              <div class="article-preview">
                <el-icon :size="40"><document /></el-icon>
              </div>
            </template>
            
            <div class="resource-info">
              <h3 class="title">{{ item.title }}</h3>
              <p class="summary">{{ item.summary }}</p>
              <div class="meta">
                <span class="author">{{ item.author }}</span>
                <span class="views">{{ item.viewCount }} 次浏览</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          :page-sizes="[9, 18, 36]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 资源详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentResource?.title"
      width="60%"
      destroy-on-close
    >
      <div class="resource-detail">
        <!-- 视频播放 -->
        <template v-if="currentResource?.type === 'VIDEO'">
          <video 
            :src="currentResource.videoUrl" 
            class="video-player" 
            controls 
            autoplay
          />
        </template>
        <!-- 文章内容 -->
        <template v-else>
          <div class="article-content">
            {{ currentResource?.content }}
          </div>
        </template>

        <div class="resource-meta">
          <span class="author">作者：{{ currentResource?.author }}</span>
          <span class="views">浏览：{{ currentResource?.viewCount }}</span>
          <span class="time">发布时间：{{ formatDate(currentResource?.createdAt) }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Document, VideoPlay } from '@element-plus/icons-vue'
import request from '@/utils/request'

const loading = ref(false)
const activeType = ref('')
const resources = ref([])
const dialogVisible = ref(false)
const currentResource = ref(null)

// 分页信息
const pagination = ref({
  current: 1,
  size: 9,
  total: 0
})

// 获取资源列表
const fetchResources = async () => {
  loading.value = true
  try {
    const params = {
      current: pagination.value.current,
      size: pagination.value.size,
      type: activeType.value
    }
    const { data } = await request.get('/admin/resource/list', { params })
    resources.value = data.records
    pagination.value.total = data.total
  } catch (error) {
    console.error('Error fetching resources:', error)
    ElMessage.error('获取资源列表失败')
  } finally {
    loading.value = false
  }
}

// 查看资源详情
const handleResourceClick = async (resource) => {
  try {
    // 增加浏览量
    await request.post(`/admin/resource/${resource.id}/view`)
    // 获取最新的资源详情
    const { data } = await request.get(`/admin/resource/${resource.id}`)
    currentResource.value = data
    dialogVisible.value = true
  } catch (error) {
    console.error('Error fetching resource detail:', error)
    ElMessage.error('获取资源详情失败')
  }
}

// 处理类型切换
const handleTypeChange = () => {
  pagination.value.current = 1
  fetchResources()
}

// 处理分页
const handleSizeChange = (val) => {
  pagination.value.size = val
  fetchResources()
}

const handleCurrentChange = (val) => {
  pagination.value.current = val
  fetchResources()
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString()
}

onMounted(() => {
  fetchResources()
})
</script>

<style scoped>
.resources {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.sub-title {
  color: #666;
  margin-top: 10px;
}

.filter-tags {
  margin-bottom: 30px;
  text-align: center;
}

.resource-list {
  margin-bottom: 40px;
}

.resource-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.video-preview, .article-preview {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  position: relative;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-icon {
  position: absolute;
  color: white;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 10px;
}

.resource-info {
  padding: 15px;
}

.title {
  margin: 0 0 10px;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 12px;
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.resource-detail {
  padding: 20px 0;
}

.video-player {
  width: 100%;
  max-height: 400px;
  margin-bottom: 20px;
}

.article-content {
  line-height: 1.8;
  color: #333;
}

.resource-meta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 20px;
  color: #666;
  font-size: 14px;
}
</style> 